<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>资料填写</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/css/css.css" rel="stylesheet" type="text/css">
    <link href="/css/Animation.css" rel="stylesheet" type="text/css">
    <link href="/css/slider.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="/images/icon.ico">
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script src="/js/slider.js" type="text/javascript"></script>
    <script src="/js/html5.js" type="text/javascript"></script>
    <script src="/js/jquery2.js" type="text/javascript"></script>
    <script src="/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/js/wow.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .massage {
            display: none;
            padding: 20px;
            position: fixed;
            top: 40%;
            left: 40%;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.5);
            z-index: 5000;
            color: #FFF;
        }
        #toTop{
            width: 50px;
            height: 65px;
            border: 1px solid black;
            background-color: #f3f6f6;
            opacity: 0.5;
            text-align: center;
            position: fixed;
            right: 80px;
            bottom: 0px;
        }
    </style>
</head>

<body>
<!--索引-->
<header class="navbar-fixed-top headerbg">
    <div class="container-fluid">
        <div class="logo">
            <h3 style="line-height: 30px;font-size: 24.5px;font-family: inherit;font-weight: bold;line-height: 20px;color: inherit;text-rendering: optimizelegibility;"><a href="#"><span style="font-size: 30px;">朋心合力</span></a></h3>
        </div>
        <div class="navBox hidden-xs hidden-sm">
            <ul class="navList list-unstyled">
                <li class="navLi on">
                    <h3><a href="#"><span>首页</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="#"><span>项目发布</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="#"><span>课程学习</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="#"><span>项目广场</span></a></h3>
                    <div class="navSub">
                        <ul class="navSubList list-unstyled">
                            <li class="navSubLi">
                                <h4><a href="#">● 寻找合伙人</a></h4>
                            </li>
                            <li class="navSubLi">
                                <h4><a href="#">● 寻找项目</a></h4>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="navLi">
                    <h3><a href="#"><span>个人主页</span></a></h3>
                </li>
            </ul >
        </div>
    </div>
</header>

<div class="banner1" style="width: 100%;height:800px ;position: relative;">
    <div style="position: absolute;padding-top:100px;margin-left: 225px;">
        <form action="/fillMoreInformation" method="post" onsubmit="return check()">
            <dl class="wrap personal"
                style="width:500px;height:600px;border:1px #e8e8e8 solid;padding-top:0px;margin-left:250px;box-shadow:0 2px 5px #d2d2d2;background-color: #FFFFFF">
                <dt style="color: deepskyblue;text-align: center;">第一次登录请进一步完善信息！</dt>
                <dd>
                    <div class="li_title" style="color: deepskyblue;">昵称</div>
                    <div class="li_cont">
                        <input type="text" placeholder="请输入您的昵称，让大家都认识你..." class="textbox" name="personalName" id="personalName"/>
                    </div>
                </dd>
                <dd>
                    <div class="li_title" style="color: deepskyblue;">年龄</div>
                    <div class="li_cont">
                        <input type="text" placeholder="请输入年龄..." class="textbox" name="talentAge" id="talentAge"/>
                    </div>
                </dd>
                <dd>
                    <div class="row course-cates chose">
                        <div class="li_title" style="color: deepskyblue;">
                            &nbsp&nbsp&nbsp&nbsp掌握技能：</div>
                    </div>
                    <div class="row course-cates">
                        <span id="massage" class="massage"></span>
                        <div class="col-md-11 course-cates-content">
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="测试">测试
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="前端">前端
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="IT运维">IT运维
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="数据库">数据库
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="算法">算法
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="数据挖掘">数据挖掘
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="云计算/大数据" style="margin-left: 33px;">云计算/大数据
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="Java">Java
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="Python">Python
                            &nbsp;&nbsp;<input name="talentTag" type="checkbox" value="架构师">架构师
                        </div>
                    </div>

                </dd>
                <dd>
                    <div class="li_title" style="color: deepskyblue;" id="miaoshu">个人描述</div>
                    <div class="li_cont">
                            <textarea placeholder="个人描述..." style="width: 420px;height: 130px"
                                      name="talentIntro" id="talentIntro"></textarea>
                    </div>
                </dd>
                <dd><input type="submit" value="提交" class="sbmt_massage"><span></span></dd>
            </dl>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $('.course-cates-content input[type=checkbox]').click(function () {
            $(".course-cates-content input[name='talentTag']").attr('disabled', true);
            if ($(".course-cates-content input[name='talentTag']:checked").length >= 3) {
                $(".course-cates-content input[name='talentTag']:checked").attr('disabled', false);
                $('#massage').html("最多只能选择三个技能标签噢").show().delay(1000).fadeOut();
            } else {
                $(".course-cates-content input[name='talentTag']").attr('disabled', false)
            }
        });
    })
    function check() {
        var personalName = $.trim($('#personalName').val());
        var talentAge = $.trim($('#talentAge').val());
        var talentIntro = $.trim($('#talentIntro').val());
        if(personalName==""||talentAge==""||talentIntro==""){
            alert("请先填写信息!");
            return false;
        }else{
            return true;
        }
    }
</script>
<!--底部样式-->
<footer class="footerBg">
    <div class="container">
        <div class="ptb40">
            <div class="footTopL">
                <dl class="clearfix" style="width: 400px; margin-left: 60px;">
                    <dt>关于我们</dt>
                    <dd><a href="#">联系地址</a></dd>
                    <dd><a href="#">荣誉资质</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>系统团队</dt>
                    <dd><a href="#">林某</a></dd>
                    <dd><a href="#">李某</a></dd>
                    <dd><a href="#">蔡某</a></dd>
                    <dd><a href="#">周某</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 100px;">
                    <dt>培训中心</dt>
                    <dd><a href="#">java类培训</a></dd>
                    <dd><a href="#">c/c++类培训</a></dd>
                    <dd><a href="#">Python类培训</a></dd>
                    <dd><a href="#">go语言类培训</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>权限介绍</dt>
                    <dd><a href="#">队长权限</a></dd>
                    <dd><a href="#">队员权限</a></dd>
                    <dd><a href="#">惩罚机制</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="CopyRight">
        <div class="container"><span class="footer_logo"><img src="images/footer_logo.png"></span><span
                class="CopyRight_name">朋心合力平台版权所有</span></div>
    </div>
</footer>
<div id="toTop">
    <i class="arrow up icon">
    </i>
    <p style="margin-top: 10px">&nbsp;返回顶部</p>
</div>
<script type="text/javascript">
    window.onload=function () {
        var oToTop=document.getElementById("toTop");
        oToTop.onclick=function () {
            document.documentElement.scrollTop="0px";
            document.body.scrollTop="0px";
        }
    }
</script>
</body>

</html>
